<template>
	<view>
		<u-navbar title="我的课程"></u-navbar>
		<view class="">
			<view class="u-p-30 u-m-b-20" v-for="(item,index) in items" :idx="item.id" style="background: #FFFFFF;">
				<view class="u-flex u-row-between">
					<view class="u-font-32" style="color: #262626;">{{item.examName}}</view>
					<view class="u-font-24" style="color: #BFBFBF;">考试时长：{{item.examDuration}}分钟</view>
				</view>
				<view class="u-m-t-15 u-flex u-row-between">
					<view class="u-font-24" style="color: #BFBFBF;">共{{item.examCount}}题</view>
					<view class="u-font-24" style="color: #BFBFBF;">奖励证书：{{item.certificateName}}</view>
				</view>
				
				<!-- 课程信息 -->
				<view v-show="item.showMore">
					<view class="u-flex u-m-t-15" style="align-items: flex-start;">
						<view class="" style="position: relative;">
							<image src="https://dummyimage.com/210x130.png" style="width: 210rpx;height: 130rpx;" mode="aspectFill"></image>
							<text v-if="item.course.complete == 0" style="position: absolute;left: 0;top: 0;z-index: 9;background: #FA541C;color: #FFFFFF;font-size: 24rpx;padding: 8rpx 10rpx;">
								未完成
							</text>
							<text v-else style="position: absolute;left: 0;top: 0;z-index: 9;background: #E8E8E8;color: #FFFFFF;font-size: 24rpx;padding: 8rpx 10rpx;">
								已完成
							</text>
						</view>
						<view class="u-flex-1 u-p-l-20">
							<view class="u-font-28">{{item.course.name}}</view>
							<view class="u-flex u-m-t-15">
								<image v-for="item in 5" src="../../static/home/star-full@2x.png" style="width: 18rpx;" mode="widthFix"></image>
							</view>
							<view class="u-m-t-15 u-flex u-row-between">
								<view class="u-font-24" style="color: #BFBFBF;">{{item.course.classHours}}学时 {{item.course.classPoint}}学分</view>
								<view class="u-font-24" style="color: #BFBFBF;">
									<u-icon name="eye-fill" size="24" label="2634" label-size="24" label-color="#BFBFBF" />
								</view>
							</view>
						</view>
					</view>
					<view class="u-font-24" style="color: #BFBFBF;">考试须知：{{item.examNotice}}</view>
				</view>
				<!--  -->
				<view class="u-text-center u-flex u-row-center" style="color: #BFBFBF;" @click="showCourseDetail(index)">
					<text class="u-font-24 u-m-r-10">
						{{item.showMore == true ? '收起' : '展开'}}
					</text>
					<image style="width: 24rpx;height: 24rpx;" :class="item.showMore == true ? 'rotate' : ''" src="../../static/arrow-down@2x.png" mode="widthFix"></image>
				</view>
				<view class="u-text-right u-flex u-row-right" style="color: #BFBFBF;margin-top: 20rpx;padding-top:22rpx;">
					<view class="u-font-26 u-m-l-20" style="border-radius: 25rpx;color: #262626;padding: 2rpx 15rpx;">考试练习</view>
					<view v-if="item.course.complete != 0">
						<view class="u-font-26 u-m-l-20" style="border-radius: 25rpx;background: #FA541C;color: #FFFFFF;padding: 2rpx 15rpx;" @click="joinExam(index)">参加考试</view>
					</view>
					<view v-else>
						<view class="u-font-26 u-m-l-20" style="border-radius: 25rpx;background: #BFBFBF;color: #FFFFFF;padding: 2rpx 15rpx;">参加考试</view>
					</view>
				</view>
			</view>
		</view>
		<tabs active="3"/>
	</view>
</template>

<script>
	import tabs from '../../components/tabs/tabs.vue'
	export default {
		components:{
			tabs
		},
		data() {
			return {
				showFlag:false,
				items:[
					{
						id:20210821,
						examName:'考试名称',
						examDuration:'60',
						examCount:100,
						certificateName:'证书名称',
						examNotice:'考试须知',
						course:{
							img:'https://dummyimage.com/210x130.png',
							complete:1,
							name:'【必修课】美丽管家上岗培训',
							looked:1234,
							level:5,
							classHours:'3.5',
							classPoint:'3.5'
						},
						showMore:false
					},
					{
						id:20210822,
						examName:'考试名称',
						examDuration:'60',
						examCount:100,
						certificateName:'证书名称',
						examNotice:'考试须知',
						course:{
							img:'https://dummyimage.com/210x130.png',
							complete:1,
							name:'【必修课】美丽管家上岗培训',
							looked:1234,
							level:5,
							classHours:'3.5',
							classPoint:'3.5'
						},
						showMore:false
					},
					{
						id:20210823,
						examName:'考试名称',
						examDuration:'60',
						examCount:100,
						certificateName:'证书名称',
						examNotice:'考试须知',
						course:{
							img:'https://dummyimage.com/210x130.png',
							complete:0,
							name:'【必修课】美丽管家上岗培训',
							looked:1234,
							level:5,
							classHours:'3.5',
							classPoint:'3.5'
						},
						showMore:false
					}
				]
			}
		},
		onLoad() {
			this.getExamList()
		},
		methods: {
			showCourseDetail(index){
				this.items[index].showMore = !this.items[index].showMore
			},
			joinExam(index){
				uni.navigateTo({
					url:`./detail?examId=${this.items[index].id}&examName=${this.items[index].examName}&qualificationId=${this.items[i].qualificationId}`
				})
			},
			getExamList(){
				this.$http.getUserExamList().then(res => {
					console.log(res)
					if(res.code == 200){
						if(res.data.length>0){
							this.items = []
							for(let i = 0;i<res.data.length;i++){
								this.items.push({
									id:res.data[i].classifyId,
									examName:res.data[i].examName,
									examDuration:res.data[i].examDuration,
									examCount:res.data[i].questionNumber,
									certificateName:res.data[i].qualificationName,
									examNotice:res.data[i].examIntroduction,
									qualificationId:res.data[i].qualificationId,
									course:{
										img:res.data[i].picture,
										complete:res.data[i].isComplete,
										name:res.data[i].lessonName,
										looked:res.data[i].broadcastNumber,
										level:res.data[i].starScore,
										classHours:res.data[i].studyHour,
										classPoint:res.data[i].studyScore
									},
									showMore:false
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
.rotate{
	transition: all;
	transform: rotate(180deg);
}
</style>
